<script setup>

import GepD4FormInput from "@/views/gepDev4/gepD4FormInput.vue";
import GepD4Layer1Left from "@/views/gepDev4/gepD4-layer1-left.vue";
import {
  useGepDataStore
} from "@/stores/gep";
import {storeToRefs} from "pinia";
import GepDialog from "@/views/gepComponent/gep-dialog.vue";
import {onUnmounted, watch,ref,provide,nextTick} from "vue";
import {useRouter} from "vue-router";
// import GepOutEchart from "@/views/gepComponent/GepOutEchart.vue";

const gepDataStore = useGepDataStore();
const router = useRouter();
const {
  isSubmitted,
} = storeToRefs(gepDataStore);
watch(isSubmitted, () => {
  console.log('刷新',isSubmitted.value)
  if (isSubmitted.value === false) {
    // 用刷新页面代替
    // window.location.reload();
    router.push('/vepCalcDev');
    setTimeout(() => {

      console.log('tiaozhuan',isSubmitted.value)
      router.push('/gepCalcDev');
    }, 200);
    }
    // router.push('/homepage');

})
const isRouterAlive = ref(true)

// 提供 reload 方法
const reload = () => {
  isRouterAlive.value = false
  nextTick(() => {
    isRouterAlive.value = true
  })
}

// 通过 provide 传递 reload 方法
provide('reload', reload)

// function toggleComponent() {
//   console.log("isSubmitted",);
//   isSubmitted.value = !isSubmitted.value;
//
// }

onUnmounted(() => {
  console.log("清除输入")
  gepDataStore.reset()
})
</script>

<template>
  <!--    最外层layer1  左右布局 -->
  <div class="gepD4-index-box">

    <gep-d4-layer1-left v-if="isRouterAlive"/>


    <el-dialog v-model="isSubmitted" style="border-radius: 8px; box-shadow: 3px 3px 10px 10px #3b3c3e; background: #060f39;"
               width="80%"
               align-center
    >
      <gep-dialog/>
    </el-dialog>

    <!--    最外层layer1  右半部分 -->
    <div class=" gepD4-layer1-right">
      <!--      <gep-d4-layer1-right/>-->
      <gep-d4-form-input/>
    </div>

  </div>
</template>

<style scoped>
/*      第一层     */
.gepD4-index-box {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  justify-content: space-between;
  position: relative; /* 使子元素可以相对于此元素定位 */
}

.gepD4-layer1-right {
  width: 100%;
  height: 100%;
  flex: 2;
}



</style>
